<template>
	<view class="details_container">
		<view class="details_wrap">
			<!-- 头部 -->
			<view class="flex flex-between align-center pt30">
				<view class="flex">
					<u-avatar src="../../static/logo.png" size="90"></u-avatar>
					<view class="ml30">
						<view class="">
							用户名字
						</view>
						<view class="">
							都市花园
						</view>
					</view>
				</view>
				<view class="top_btn">
					<u-button color="#F09694" text="闲置物"></u-button>
				</view>
			</view>
			<view class="details_content">
				<!-- 内容 -->
				<view class="f25 mtb30">
					用户名称都市花园商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述
					商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情
					况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等商品描述表述商品的基本情况等
				</view>
				<!-- 图片 -->
				<view class="content_image">
					<image src="../../static/logo.png" mode=""></image>
					<image src="../../static/logo.png" mode=""></image>
				</view>
			</view>
			<!-- 留言 -->
			<view class="details_leave mt30">
				<view class="pl20">
					<view class="f28 f700 pt25">
						15条留言
					</view>
					<view class="flex align-center pt25">
						<view class="">
							<u-avatar :src="srcMy" size="70"></u-avatar>
						</view>
						<view class="leave_input ml30">
							<u--input shape="circle" placeholder="看对眼就留言,问问细节" border="surround" v-model="value"
								@change="change"></u--input>
						</view>
					</view>
					<view class="flex align-center pt20 f25">
						<view class="">
							<u-avatar :src="srcUser" size="70"></u-avatar>
						</view>
						<view class="ml20">
							<view class="text-shijian">
								懒羊公主
							</view>
							<view class="">
								好东西，价格合理
							</view>
						</view>
					</view>
					<view class="flex align-center pt20 f25">
						<view class="">
							<u-avatar :src="srcUser" size="70"></u-avatar>
						</view>
						<view class="ml20">
							<view class="text-shijian">
								懒羊公主
							</view>
							<view class="">
								好东西，价格合理
							</view>
						</view>
					</view>
					<view class="flex align-center pt20 f25">
						<view class="">
							<u-avatar :src="srcUser" size="70"></u-avatar>
						</view>
						<view class="ml20">
							<view class="text-shijian">
								懒羊公主
							</view>
							<view class="">
								好东西，价格合理
							</view>
						</view>
					</view>
					<view class="flex align-center pt20 f25">
						<view class="">
							<u-avatar :src="srcUser" size="70"></u-avatar>
						</view>
						<view class="ml20">
							<view class="text-shijian">
								懒羊公主
							</view>
							<view class="">
								好东西，价格合理
							</view>
						</view>
					</view>
					<view class="pt30 f25 text-center text-shijian">
						——<text class="mlr10">超过90天或涉及违规的留言将被隐藏</text>——
					</view>
					<view class="pt30 f28 f700 text-hopedetail text-center pb160" @click="showLeave = true">
						查看全部留言<text class="ml10">></text>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 底部 -->
		<view class="details_down flex flex-between align-center">
			<view class="flex pl35">
				<view class="" @click="showLeave = true">
					<u-icon name="chat-fill" size="70"></u-icon>
				</view>
				<view class="pl40">
					<u-icon name="star" size="70"></u-icon>
				</view>
			</view>
			<view class="down_need flex flex-center mr30" @click="toChat">
				<u-icon name="star" size="70"></u-icon>
				<view class="f700 f35 ml20">
					我需要
				</view>
			</view>
		</view>

		<!-- 弹出框 -->
		<view class="details_popup">
			<u-popup :show="showLeave" mode="center" :closeOnClickOverlay="true" @close="close">
				<view class="popup-content">
					<view class="pt25 f28 f700 text-center">
						留言·<text>15</text>
					</view>
					<scroll-view class="content-scroll" scroll-y="true">
						<view class="flex align-center pt30 f25 pl40">
							<view class="">
								<u-avatar :src="srcUser" size="70"></u-avatar>
							</view>
							<view class="ml20">
								<view class="text-shijian">
									懒羊公主
								</view>
								<view class="">
									好东西，价格合理
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				srcMy: '../../static/logo.png',
				srcUser: '../../static/logo.png',
				showLeave: false
			}
		},
		methods: {
			//去聊一聊页面
			toChat() {
				uni.navigateTo({
					url: '/pages/service/chat'
				});
			},
			//关闭弹出框
			close() {
				this.showLeave = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details_container {
		background: #E7E7E7;
		height: 100%;

		.details_wrap {
			width: 90%;
			margin: 0 auto;

			.top_btn {
				/deep/ .u-button {
					width: 160rpx;
					height: 60rpx;
					border-radius: 40rpx;
				}
			}

			.details_content {
				.content_image {
					image {
						width: 100%;
						height: 600rpx;
						margin-top: 15rpx;
					}
				}
			}

			.details_leave {
				background: #FFFFFF;

				.leave_input {
					/deep/ .u-input {
						border: 1rpx solid #333;
						width: 530rpx;
						height: 50rpx;
					}
				}
			}
		}

		.details_down {
			height: 128rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			// padding-bottom: 68rpx;
			position: fixed;
			bottom: 0;
			width: 100%;

			.down_need {
				width: 280rpx;
				height: 90rpx;
				border-radius: 50rpx;
				border: 1rpx solid #333;

			}
		}

		.details_popup {
			/deep/ .u-popup__content {
				width: 95%;
				height: 70%;
				border-radius: 30rpx;
			}

			.popup-content {
				height: 100%;
				/* 让内容撑满弹出框 */
				overflow: hidden;
				/* 隐藏超出部分 */
			}

			.content-scroll {
				height: calc(100% - 50px);
				/* 50px 为标题的高度，用于计算内容滚动区域的高度 */
			}
		}
	}
</style>